<!--
 * @Descripttion: (/SystemSet)
 * @version: (1.0)
 * @Author: (admin)
 * @Date: (2024-10-30)
 * @LastEditors: (admin)
 * @LastEditTime: (2024-10-30)
-->
<template>
  <div class="app-container">
    <el-form ref="form" :model="form" :rules="rules" :label-width="formLabelWidth">
        <el-row>
          <el-col :span="8">
            <el-form-item label="系统名称" prop="systemName">
              <el-input v-model="form.systemName" placeholder="请输入系统名称" />
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="系统版本" prop="systemnumber">
              <el-input v-model="form.systemnumber" placeholder="请输入系统版本" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="生产厂家" prop="manufacturer">
              <el-input v-model="form.manufacturer" placeholder="请输入厂家" />
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="使用单位" prop="user">
              <el-input v-model="form.user" placeholder="请输入使用单位" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>

  </div>
</template>
<script>
import { 
  addSystemSet,
  updateSystemSet,
  getSystemSet,
} from '@/api/dust/systemSet.js';

export default {
  name: "systemset",
  data() {
    return {
      formLabelWidth:"100px",
      // 表单参数
      form: {
        Id:"",
        systemName:"",
        manufacturer:"山东道宽智能科技有限公司",
        user:""
      },
      // 表单校验
      rules: {
        systemName: [{ required: true, message: '请输入系统名称', trigger: 'blur' },
        { min: 1, max: 150, message: '长度在 1 到 150 个字符', trigger: 'blur' }],
        manufacturer: [{ required: true, message: '请输入生产厂家', trigger: 'blur' },
        { min: 1, max: 150, message: '长度在 1 到 150 个字符', trigger: 'blur' }],
        user: [{ required: true, message: '请输入使用单位', trigger: 'blur' },
        { min: 1, max: 150, message: '长度在 1 到 150 个字符', trigger: 'blur' }]
      },
    };
  },
  created() {    
    // 列表数据查询
    this.handleUpdate();
  },
  methods: {
    /** 修改按钮操作 */
    handleUpdate() {
      getSystemSet().then((res) => {
        const { code, data } = res;
        if (code == 200) {
          this.form = {
            ...data,
          };
        }
      });
    },
    /** 提交按钮 */
    submitForm: function () {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          debugger;
          console.log(JSON.stringify(this.form));
          if (this.form.Id != "") {
            updateSystemSet(this.form)
              .then((res) => {
                this.msgSuccess("修改成功");
                this.open = false;
                this.getList();
            })
            .catch((err) => {
                //TODO 错误逻辑
              });
          } else {
            addSystemSet(this.form)
              .then((res) => {
                this.msgSuccess("新增成功");
                this.form.Id=res.data;
            })
            .catch((err) => {
                //TODO 错误逻辑
              });
          }
        }
      });
    },
  },
};
</script>